<template>
  <div id="app">
    <div id="searchData">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.storeName" placeholder="——请按照店名搜索——" class="center-text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="searchStore" icon="el-icon-search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addStation" icon="el-icon-circle-plus-outline">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="flushedStation" icon="el-icon-refresh">刷新</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div id="myTable">
      <el-table :data="tableData" height="500" border style="width: 100%">
        <el-table-column prop="station" label="工位id" width="150">
        </el-table-column>
        <el-table-column prop="store.storeName" label="门店" width="180">
        </el-table-column>
        <el-table-column prop="picture" label="图片" width="250">
          <template slot-scope="scope">
            <el-image :src="scope.row.picture" style="width: 70px; height: 70px"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="stationName" label="几号库">
        </el-table-column>
        <el-table-column prop="idle" label="是否空闲">
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.idle == 1">使用中
            </el-tag>
            <el-tag effect="dark" type="success" v-if="scope.row.idle == 0">空闲中
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <el-button type="primary" @click="editStation(scope.row)" icon="el-icon-edit-outline">编辑
            </el-button>
            <el-button type="danger" @click="deleteByStation(scope.row.station)" icon="el-icon-remove-outline">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchForm.currentPage" :page-sizes="[1, 5, 10, 20]" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div id="dialog">
      <!--添加和编辑的对话框-->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="addEditform" :model="addEditform" :rules="rules" label-width="80px">
          <el-form-item label="门店" prop="storeId">
            <el-select placeholder="请选择门店" v-model="addEditform.storeId" style="width: 100%;">
              <el-option v-for="item in stores" :label="item.storeName" :value="item.storeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload class="avatar-uploader" :action="uploadAction" :headers="head" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="addEditform.picture" :src="addEditform.picture" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="几号库" prop="stationName">
            <el-input v-model="addEditform.stationName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否空闲">
            <el-select placeholder="请选择状态" v-model="addEditform.idle" style="width: 100%;">
              <el-option key="0" label="空闲" value="0">
              </el-option>
              <el-option key="1" label="使用中" value="1">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelbutt">取 消</el-button>
          <el-button type="primary" @click="enterAdd" v-if="actor == 'add'">确定添加</el-button>
          <el-button type="primary" @click="enterEdit" v-if="actor == 'edit'">确定编辑</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      head: '',
      //确认按钮类型
      actor: '',
      //上传图片访问路径
      uploadAction: this.$http.getUri() + "/store/station/uploadFile",
      //table默认数据
      tableData: undefined,
      total: 0,
      //对话框默认值
      dialogVisible: false,
      searchForm: {
        //默认当前页
        currentPage: 1,
        //默认页大小
        pageSize: 5,
        storeName: "",
      },
      addEditform: {
        idle: '',
        picture: '',
        stationName: '',
        storeId: '',
      },
      //门店信息
      stores: [],
      rules: {
        storeId: [{ required: true, message: '门店名称不能为空', trigger: 'change' }],
        stationName: [{ required: true, message: '库不能为空', trigger: 'change' }],
      }
    }
  },
  created() {
    this.loadStation();
    this.loadStoreMsg();
    this.head = {
      token: sessionStorage.getItem("token")
    }
  },
  methods: {
    //加载Station
    loadStation() {
      this.$http.post("store/station/selectStationWithStore", this.searchForm).then(resp => {
        console.log(resp.data.data.records);
        this.tableData = resp.data.data.records;
        this.total = resp.data.data.total;
      })
    },
    //修改页大小
    handleSizeChange(num) {
      this.searchForm.pageSize = num;
      this.loadStation();
    },
    //修改当前页
    handleCurrentChange(num) {
      this.searchForm.currentPage = num;
      this.loadStation();
    },
    //搜索店名
    searchStore() {
      this.searchForm.currentPage = 1;
      this.loadStation();
    },
    //删除数据
    deleteByStation(num) {
      console.log(num)

      this.$confirm('是否删除该数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("store/station/deleteStationByStation?station=" + num).then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.searchForm.currentPage = 1;
            this.loadStation();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //加载店铺信息
    loadStoreMsg() {
      this.$http.get("/store/selectStoreByUserId").then(resp => {
        console.log(resp.data.data);
        this.stores = resp.data.data;
      })
    },
    //对话框关闭方法
    handleClose() {
      this.dialogVisible = false
      this.addEditform = {}
      this.loadStation();
    },
    //添加按钮的方法
    addStation() {
      this.actor = "add";
      this.dialogVisible = true;
    },
    //确认添加方法
    enterAdd() {
      this.$refs.addEditform.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.actor = ''
          console.log(this.addEditform, "--------------");
          this.$http.post("/store/station/insertStation", this.addEditform).then(resp => {
            if (resp.data.code == 200) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.loadStation();
            }
          })
          this.addEditform = {}
          this.dialogVisible = false;
        }
      });
    },
    //编辑按钮
    editStation(row) {
      console.log(row);
      this.actor = "edit"
      this.dialogVisible = true;
      this.addEditform.storeId = row.storeId
      this.addEditform = row;

    },
    //确认编辑方法
    enterEdit() {
      this.$refs.addEditform.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.actor = "";
          console.log(this.addEditform, "-------------")
          this.$http.post("/store/station/updateStation", this.addEditform).then(resp => {
            if (resp.data.code == 200) {
              this.$message({
                type: 'success',
                message: '更新成功!'
              });
              this.loadStation();
            }
          })
          this.addEditform = {}
          this.dialogVisible = false;
        }
      })
    },
    //取消按钮
    cancelbutt() {
      this.dialogVisible = false
      this.addEditform = {};
      this.loadStation();
    },
    //刷新按钮
    flushedStation() {
      this.searchForm.storeName = '';
      this.loadStation();
    },

    //图片上传的方法
    handleAvatarSuccess(res, file) {
      console.log(res, "-------------------")
      this.addEditform.picture = res.data
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isJPGorPNG = isImage && (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG或者是PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M;
    },


  }
}
</script>
<style scoped>
#searchData {
  float: left;
}

/*上传图片的样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;

  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  align-items: center;
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 70px;
  padding-top: 50px;
}

.avatar {
  width: 120px;
  height: 120px;

  display: block;
}

.center-text {
  /*text-align: center;*/
}
</style>